import React from "react";
import { List, Skeleton } from "antd";

import LoadMore from "./LoadMore";
import FontItem from "./FontItem";

/**
 *
 * @param {{
 * loading:boolean,
 * data:any[],
 * onFontChange:(checkedValue:any)=>void,
 * onDownloadClick:(e:any)=>void,
 * onLoadMore:(e:any)=>void
 * }} props
 */
const FontList = (props) => {
  const {
    loading,
    onLoadMore,
    data,
    checked,
    onDownloadClick,
    onFontChange,
  } = props;
  return (
    <List
      className="demo-loadmore-list"
      loading={loading || false}
      itemLayout="horizontal"
      loadMore={
        data && data.length > 0 && <LoadMore onLoadMore={onLoadMore || ""} />
      }
      dataSource={data || []}
      renderItem={(item) => {
        return (
          <Skeleton title={true} loading={item.loading} active>
            <List.Item>
              <FontItem
                {...{
                  fontName: item.name,
                  checked,
                  onDownloadClick,
                  onFontChange,
                }}
                {...item}
              />
            </List.Item>
          </Skeleton>
        );
      }}
    />
  );
};

export default FontList;
